<template>
  <div class="rate">
    <hips-rate :d-field="dsx.records.current.getField('value')" />
    <hips-button
      v-if="!editable"
      @click="handleSave"
    >
      确认
    </hips-button>
  </div>
</template>

<script>
import { Rate, Button } from '@hips/vue-ui';
import Dsx from '@hips/plugin-dataset-vuex';

export default {
  name: 'Rate',
  components: {
    [Rate.name]: Rate,
    [Button.name]: Button,
  },
  props: {
    editFlag: Number, // 自定义属性-自定义参数配置-[编辑模式]
    setValueEvt: Object, //
    handleRunEvent: Function, // 预置属性-调用飞搭事件流
    handleChangeOutputParams: Function, // 预置属性-出参到 自定义组件
    setEventFunction: Function, // 预置属性-设置自定义组件函数给飞搭调用
  },
  data() {
    return {
      editable: true,
      dsx: new Dsx({
        name: 'dsx-rate',
        autoCreate: true,
        fields: [
          {
            name: 'value',
            defaultValue: 0,
            showScore: true,
          },
        ],
      }),
    };
  },
  watch: {
    editFlag(newVal) {
      this.editable = newVal == 0;
      const field = this.dsx.records.current.getField('value');
      field.setProp('readonly', this.editable);
    },
  },
  mounted() {
    this.setEventFunction('show', this.show);
  },
  methods: {
    /**
     * 显示当前值
     */
    show(params) {
      const field = this.dsx.records.current.getField('value');

      this.$hips.dialog.alert({
        title: params.title,
        content: `评分值是 ${field.getValue()}`,
        okText: '确认',
      });

      return Promise.resolve();
    },
    /**
     * 出参并执行飞搭事件流
     */
    handleSave() {
      const field = this.dsx.records.current.getField('value');
      this.handleChangeOutputParams({
        name: 'value',
        value: field.getValue(),
      });
      this.handleRunEvent(
        this.setValueEvt.flowCode,
        () => {
          return Promise.resolve();
        },
        () => {
          return Promise.reject();
        },
      );
    },
  },
};
</script>

<style scoped>
.rate {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
